import React, { Component } from 'react'

function hocMove(Com, left) {
    return class NewCom extends Component {
        state = {
            top: 20,
            left
        }

        MouseDown = () => {
            document.addEventListener('mousemove', this.MouseMove)
        }

        MouseMove = (ev) => {
            this.setState({
                top: ev.clientY,
                left: ev.clientX
            })
            document.addEventListener('mouseup', this.MouseUp)
        }

        MouseUp = () => {
            document.removeEventListener('mousemove', this.MouseMove)
        }
        render() {
            const { top, left } = this.state
            return <div style={{
                top,
                left,
                position: "absolute"
            }} onMouseDown = { this.MouseDown }>
                <Com />
            </div>
        }
    }
}

export {
    hocMove
}